<template>
  <div class="toptools">
    <div class="toolbar" style="display:none;">
      <div class="shaixuan" :class="{active: filterOpen}" @click="filterOpen = !filterOpen;">筛选<span class="s">></span></div>
    </div>
    <div class="modal" v-if="filterOpen" @click.self="filterOpen = false;">
      <div class="filterArea innerArea">
        <div class="len" v-for="(item, index) in filters" :key="index">
          <div class="label">{{item.label}}:</div>
          <div class="right" v-if="item.type == 'text'">
            <input type="text" :style="item.style" :placeholder="item.placeholder" v-model="item.tempValue">
          </div>
          <div class="right" v-if="item.type == 'date'">
            <input type="date" :style="item.style" :placeholder="item.placeholder" v-model="item.tempValue">
          </div>
          <div class="right" v-if="item.type == 'radio'">
            <div class="radio-items">
              <div class="item" v-for="(radio, radioId) in item.options" :key="radioId" 
                :class="{active: radio.value == item.tempValue}"
                @click="handleRadioChecked(item, radio)">{{radio.label}}</div>
            </div>
          </div>
        </div>
        <div class="btnArea">
          <div class="grey btn" @click="filterReset()">重置</div>
          <div class="btn" @click="filterFinish()">完成</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "TopTools",
  props: {
    filters: {
      type: Array,
      required: true
    }
  },
  components: {

  },
  data () {
    this.filters.forEach(n => {
      if (n.type == 'radio') {
        n.tempValue = n.default;
      } else {
        n.tempValue = '';
      }
    });
    return {
      filterOpen: false
    };
  },
  methods: {
    handleRadioChecked: function (item, radio) {
      item.tempValue = radio.value;
      this.$forceUpdate();
    },
    toggle: function () {
      this.filterOpen = !this.filterOpen;
    },
    filterReset: function () {
      this.filters.forEach(n => {
        if (n.type == 'radio') {
          n.value = n.default;
          n.tempValue = n.default;
        } else {
          n.value = '';
          n.tempValue = '';
        }
      });
      this.$forceUpdate();
    },
    filterFinish: function () {
      this.filterOpen = false;
      this.filters.forEach(n => {
        n.value = n.tempValue;
      });
      this.$emit('doFilter');
    },
    getFilterValue: function () {
      var result = {};
      this.filters.forEach(n => {
        if (n.value || n.always) { // 在空的时候就不传
          result[n.name] = n.value;
        }
      });
      return result;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
